<template>
  <div class="addEditArticlePageCont">
    <div class='title'>当前位置：霸屏神器 / 查看霸屏神器</div>
    <div class="biao">
      <div class="biaoLeft">
        <p class="p1">
          <Icon type="ios-list-box-outline" size="30" color="#abdcff" />
          <span>文章标题：{{shortDetails.title}}</span>
        </p>
        <p class="p2">
          <span>创建人：{{shortDetails.createUser}}</span><span>创建时间：{{shortDetails.createDate}}</span>
        </p>
      </div>
      <div class="biaoRight">
        <span>{{transfor(shortDetails.state)}}</span>
      </div>
    </div>
    <div class="addEditArticlePageMian">
      <!-- <div class="tit">文章正文 <span @click="shortView">#文章预览#</span></div> -->
      <div class="content">{{shortDetails.content}}</div>
      <div class="tit">正文配图</div>
      <div class="wenTu">
        <img :src="shortDetails.picUrl" @click="seeBg" alt="">
      </div>
      
      <div class="tit">微信文案</div>
      <div class="wenTu" v-html="shortDetails.wxContent"></div>

      <div class="footer">

        <Button @click="shortView">文章预览</Button>
        <Button @click="addEditArticleReset" style="margin-left:10px;">关闭</Button>
      </div>
    </div>
    <!-- 图片放大 -->
    <!-- <Modal title="图片预览" v-model="imageVisible" :footerHide="true">
      <img :src="previewAddress" style="width: 100%">
    </Modal> -->
    <temp-all ref="tempAll" :tempNum="shortDetails.templateName"
      :tuUrl='shortDetails.backgroudUrl' :upShelfOrPreview='upShelfOrPreview'
      :shortDetails="shortDetails" @upShelfOk='upShelfOk' :btnFlag='true'>
    </temp-all>
    <preview-image :images="preViewImg" :showDownLoad="showDownLoad" :showIndex="showIndex"
      ref="preViewImage"></preview-image>
  </div>
</template>
<script>
  // import dtEditorShow from '@/components/dt/editor/show'
  import bgMapMgr from '@/biz/bgMap/bgMap'
  import tempAll from "@/components/template/tempAll.vue"
  export default {
    components: {
      // dtEditorShow
      tempAll
    },
    data() {
      return {
        // previewAddress: '',
        // imageVisible: false,
        // cityName: '',
        // buildingName: '',
        // articleTitle: '',
        // articleTags: '',
        // fileList: [],
        // articleContent: '',
        // sensitiveWords: null
        shortDetails: {},
        upShelfOrPreview: 'preview',
        preViewImg: [],
        showDownLoad: false,
        showIndex: 0,
      }
    },

    methods: {
      seeBg() {
        this.preViewImg = []
        this.preViewImg.push(this.shortDetails.picUrl)
        this.$refs.preViewImage.show()

      },
      transfor(value) {
        let set = { '0': "校验未通过", '1': "已下架", '2': "已上架" };
        return set.hasOwnProperty(value) ? set[value] : value

      },
      shortView() {
        this.$refs.tempAll.show()
      },
      upShelfOk(val) {
        if (val == "preview") {
          this.$refs.tempAll.closeTemp()

        }
      },

      // 关闭
      addEditArticleReset() {
        this.$router.go(-1)
      },
      // handleView(val) {
      //   this.previewAddress = val
      //   this.imageVisible = true
      // },
      // 初始化获取数据
      initData() {
        bgMapMgr.shortSrticleGetById({ id: this.$route.query.id })
          .then((res) => {
            console.log(res, '短文详情');
            if (res) {
              res.wxContent = res.wxContent&&res.wxContent.replace(/\n/g, '</br>')
              this.shortDetails = res
            }
          })
          .catch((err) => {
            this.$Message.error(err)
          })
      },
    },
    created() {
      // 初始化获取数据
      this.initData()
    },
  }
</script>
<style lang="scss" scoped>
  .addEditArticlePageCont {
    .title {
      background-color: #f5f5f5;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      padding: 0 14px 10px;
    }

    .addEditArticlePageMian {
      margin-top: 16px;
      padding: 0 26px;

      .tit {
        font-size: 16px;
        margin-top: 24px;

        span {
          color: #abdcff;
          font-size: 14px;
          cursor: pointer;
        }
      }

      .content {
        border: 1px #ccc solid;
        padding: 10px;
        line-height: 1.4;
        margin: 10px 0;
      }

      .wenTu {
        margin: 10px 0;
        cursor: pointer;

        img {
          max-width: 200px;
          display: block;
        }
      }

      .footer {
        margin-top: 30px;
      }

    }

    .biao {

      margin-left: 26px;
      margin-top: 10px;
      margin-right: 26px;
      padding: 10px;
      border: 1px solid #abdcff;
      background-color: #f0faff;
      display: flex;
      flex-direction: row;

      .biaoLeft {
        flex: 10;


        .p1 {
          line-height: 30px;

          i {
            vertical-align: -8px;
          }
        }

        .p2 {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          padding-right: 10%;
          margin-top: 10px;
        }


      }

      .biaoRight {
        flex: 4;

        span {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-left: 1px #abdcff solid;
          font-size: 20px
        }
      }
    }
  }

  .footer {
    text-align: center;

    button {
      width: 90px;
      margin: 0 10px;
    }
  }

  // 上传
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }

  .FormItemUpload .ivu-form-item-content {
    display: flex;
  }

  .imageSize {
    display: inline-block;
    margin-left: 16px;
    vertical-align: top;
    padding-top: 16px;
  }

  .wrong {
    color: red;
  }
</style>